<template>
  <footer class="footer" v-if="Object.keys(list).length !== 0">
    <span class="todo-count"
      >剩余<strong>{{ list.length }}</strong></span
    >
    <ul class="filters">
      <li v-for="(item, index) in arr" :key="index">
        <a
          @click="btn(index)"
          :class="{ selected: index === isIndex }"
          href="javascript:;"
          >{{ item }}</a
        >
      </li>
    </ul>
    <button class="clear-completed" @click="del">清除已完成</button>
  </footer>
</template>

<script>
import { mapState } from "vuex";

export default {
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    }
  },
  computed: {
    ...mapState(["arr", "isIndex"]),
  },
  methods: {
    btn(index) {
      this.$emit("isClick", index);
    },
    del() {
      this.$emit("delComplete");
      this.$prompt.show("清除选中成功！");
    },
  },
};
</script>
